<template>
	<view class="order_box">
		<!-- head区域 -->
		<view class="head">
			<view class="useraddress" >
				<view class="addressinfo" v-if="localBuffer" @click="goAddressList"  hover-class="touchOpacity">
					<text space="ensp" class="addressinfo_top">{{address.username}}   {{address.userphone}}</text>
					<view class="addressinfo_bottom">
						<!-- <uni-tag  size="small" type="error" :inverted="true" :circle="true" text="默认"></uni-tag>
						<uni-tag  size="small" type="error" :inverted="true" :circle="true" text="默认"></uni-tag> -->
						<text class="addressinfo_bottom_status" v-if="address.status ==1">默认</text>
						<text class="addressinfo_bottom_label" v-if="address.label != '' ">{{address.label}}</text>
						<text class="addressinfo_bottom_useraddress">{{address.location+address.useraddress}}</text>
					</view>
				</view>
				<view class="addressinfo" v-else>
					<u-button type="warning" :plain="true" @click="addressAdd">+点击完善收货地址</u-button>
				</view>
			</view>
		</view>
		
		<view class="order_ticket">
			<image src="../../static/icon/index/kingkong/selfsupport.png"></image>
			<text>品牌精选</text>
			<text>以免运费 |</text>
			<text>领券</text>
		</view>
		<!-- 商品信息区域 -->
		<view class="order_view">
			<!-- 明日来写购物车基本信息 -->
			<view 
				class="cartInfochild" 
				v-for="(item,index) in orders"
				:key="index"
			>
				<!-- 图片 -->
				<image :src="baseUrl + item.img" class="cartInfo_image"></image>
				<!-- 信息 -->
				<view class="cartInfo_info">
					<text>{{item.goodsname}}</text>
					<text>￥
						<text style="font-size: 40rpx;color:#FF6040;">{{item.price}}</text>
					</text>
					<text >七天无理由退货</text>
				</view>
				<!-- 加减数量 -->
				<view class="cartInfo_num">
					<label> ×{{item.num}}</label>
				</view>
			</view>
		</view>
		
		<!-- 具体详细1 -->
		<view class="resDetail">
			<view hover-class="touchOpacity">
				<label for="" class="resDetail_title">发票类型</label>
				<label for="" style="margin-right:40rpx;color:#333333;font-size: 24rpx;">不开发票 ></label>
			</view>
			<view class="">
				<label for="" class="resDetail_title">售后免邮</label>
				<label for="" style="margin-right:40rpx;color:#666666;font-size: 24rpx;">部分商家赠送</label>
			</view>
			<view class="" >
				<label for="" class="resDetail_title">卖家留言</label>
				<label for="" style="margin-right:40rpx;color:#666666;font-size: 24rpx;">填写内容需要与商家协商并确认，45字以内</label>
			</view>
		</view>
		
		<!-- 具体详细2 -->
		<view class="resDetail" style="margin:10rpx 0 98rpx;">
			<view class="">
				<label for="" class="resDetail_title">商品金额</label>
				<label for="" style="margin-right:40rpx;color:#333333;font-size: 24rpx;">￥{{countmoney.price}}</label>
			</view>
			<view class="">
				<label for="" class="resDetail_title">优惠活动</label>
				<label for="" style="margin-right:40rpx;color:#FF6040;font-size: 24rpx;">-￥{{countmoney.delta}}</label>
			</view>
			<view hover-class="touchOpacity">
				<label for="" class="resDetail_title">优惠券</label>
				<label for="" style="margin-right:40rpx;color:#666666;font-size: 24rpx;">更多优惠券 ></label>
			</view>
		</view>
		<!-- 确认订单按钮 -->
		<view class="foot">
			<view class="foot_left">
				<text class="foot_left_count" space="ensp">合计<text>￥{{countmoney.price}}</text></text>
				<text class="foot_left_ticket" space="ensp">已免运费   <text>已优惠￥{{countmoney.delta}}</text></text>
			</view>
			<view class="foot_right" hover-class="touchOpacity" @click="goCartList">确认订单</view>
		</view>
	
	</view>
</template>

<script>

	export default {
		data() {
			return {
				orders:[],
				countmoney:0,
				countnumber:0,
				address:{status:1,label:'公司',username:'李四',userphone:13716078900,location:'北京市市辖区朝阳区',useraddress:'五方桥基地'},//初始化收货地址
				localBuffer:true,//初始化收货地址开关
				baseUrl:this.$baseUrl
			}
		},
		
		onLoad(option){
			// 1.获取 购物车过滤后的商品  更新视图
			this.orders = uni.getStorageSync('cartInfo').cartList
			console.log(uni.getStorageSync('cartInfo'));
			this.countmoney = uni.getStorageSync('cartInfo').countmoney
			this.countnumber = uni.getStorageSync('cartInfo').countnumber
			console.log(this.countmoney);

		},
		onShow() {
			// 判断是否从地址页面返回
			if(uni.getStorageSync('addressInfo')){
				this.address = uni.getStorageSync('addressInfo')
			}else{
				// 2. 默认地址
				this.getAddress()
			}
		},
		onUnload() {
			uni.removeStorageSync('addressInfo')
			uni.removeStorageSync('cartInfo')
		},
		methods: {
			// 4.跳转到订单列表页面
				
			goCartList(){
				let id = this.orders.map(item => {
					return item.id
				})
				// let idStr = `${id}`;
				let idStr = `${id}`;

				this.$http({
					url:'orderadd',
					method:'post',
					header:{
						"content-type":"application/json",
						"authorization":uni.getStorageSync('userInfo').token || null
					},
					data:{
						uid:uni.getStorageSync('userInfo').uid,
						countmoney:this.countmoney.price,
						countnumber:this.countnumber,
						addressid:this.address.id,
						idstr: idStr
					}
				}).then(res => {
					console.log(res);
					// 订单提交成功, 跳转到支付页面
						
					if(res.data.code == 200){
						// 传参
						uni.redirectTo({
							url:'../pay/pay?outTradeNo=' + res.data.list.outTradeNo + '&totalAmount=' + this.countmoney.price
						})
					}else{
						// 编译兼容  如果是微信小程序就跳转一键登录
						// #ifdef  MP-WEIXIN
						uni.navigateTo({
							url:'../login/login'
						})
						// #endif
						
						// 如果不是微信小程序就跳转短信登录
						// #ifndef MP-WEIXIN
						uni.navigateTo({
							url:'../textlogin/textlogin'
						})
						// #endif

					}

				})
				
				
			},
			// 3.跳转到地址列表页面
			goAddressList(){
				uni.navigateTo({
					url:'../address/address'
				})
			},
			// 2.跳转到地址添加页面
			addressAdd(){
				
			},
			// 1.获取默认地址
			getAddress(){
				this.$http({
					url:'addresslist',
					header:{
						"content-type":"application/json",
						"authorization":uni.getStorageSync('userInfo').token || null
					},
					data:{
						uid:uni.getStorageSync('userInfo').uid,
						status:1
					}
				}).then(res => {
					console.log(res);
					if(res.data.code === 200){
						this.localBuffer = true
						this.address = res.data.list[0]
					}else{
						this.localBuffer = false
					}
				})
			}
		}
	}
</script>

<style scoped>
	/* 引入样式 */
	@import url("@/static/css/order.css");
</style>
